<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>站点密钥</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="../viewstyle/css/publicform.css">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
    <style>

    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">区域</label>
                    <div class="layui-input-inline">
                        <select name="role" id="area">
                            <option value="">选择区域</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="starttime" placeholder="输入站点创建开始时间">
                            </div>
                            <div class="layui-form-mid">
                                -
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="endtime" placeholder="输入站点创建结束时间">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <input type="text" id="zdiabianhaomc" class="layui-input" placeholder="输入站点编号或站点名称">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" id="btnsearch" lay-submit
                            lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>


        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>

    </div>
</div>


</body>

<script type="text/html" id="tb">
    <div class="layui-container">
        <span class="">站点列表</span>
    </div>
</script>

<script type="text/html" id="caozuo">
    <button class="layui-btn layuiadmin-btn-admin layui-btn-xs" lay-event="miyaoguanli">密钥管理</button>
    <button class="layui-btn layuiadmin-btn-admin layui-btn-xs" lay-event="detail">密钥充值</button>
    <button class="layui-btn layuiadmin-btn-admin layui-btn-xs" lay-event="detailjl">充值记录</button>
</script>
<script>
    layui.config({
        base: '../viewstyle/' //主页样式的嵌入地址
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index'], function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate

            //日期时间选择器
            laydate.render({
                elem: '#starttime'
                , type: 'datetime'
            })
            laydate.render({
                elem: '#endtime'
                , type: 'datetime'
            })
        })

        layui.use('table', function () {
            var $ = layui.$
            var table = layui.table
            table.render({
                elem: '#t',
                id: 'tt',
                toolbar: '#tb',
                url: '/admin/station/selectPasswodFenye',
                cols: [
                    [{
                        field: 'station_bh',
                        title: '站点编号',
                        width: '17%',
                        align: 'center'
                    },
                        {
                            field: 'station_name',
                            title: '站点名称',
                            width: '17%',
                            align: 'center'
                        },
                        {
                            field: 'station_key_yue',
                            title: '站点秘钥余额',
                            width: '15%',
                            align: 'center'
                        },
                        {
                            field: 'station_hour_room',
                            title: '站点钟点房使用量',
                            width: '15%',
                            align: 'center'
                        },
                        {
                            field: 'station_all_living_room',
                            title: '站点包天房使用量',
                            width: '15%',
                            align: 'center'
                        },
                        {
                            field: 'depName',
                            title: '操作',
                            align: 'center',
                            toolbar: '#caozuo'
                        }
                    ]
                ],
                page: true,
                limit:40
            })

            //监听工具条
            table.on('tool(t)', function (obj) {
                var getdata = obj.data;
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                switch (layEvent) {
                    case 'miyaoguanli':
                        layui.data('stationdata', {
                            key: 'getdata',
                            value: getdata
                        })
                        parent.layui.index.openTabsPage("jifei/miyaoguanli.html", "密钥管理");

                        break;
                    case "detail":
                        layui.data("stationdata2", {
                            key: "getdata",
                            value: getdata
                        });
                        layer.open({
                            content: 'miyaocz.html',
                            type: 2,
                            title: '密钥充值',
                            area: ['100%', '100%']
                        });
                        break;
                    case "detailjl":
                        layui.data("czjl", {
                            key: "getdata",
                            value: getdata
                        });
                        layer.open({
                            content: 'miyaoczjl.html',
                            type: 2,
                            title: '密钥充值记录',
                            area: ['100%', '100%']
                        });
                        break;
                }
            })

            //搜索的监听时间
            $('#btnsearch').click(function () {
                table.reload('tt', {
                    where: {
                        station_area: $("#area").val(),
                        station_create_time1: $("#starttime").val(),
                        station_name_id: $("#zdiabianhaomc").val(),
                        station_create_time2: $("#endtime").val()
                    },
                    page: {
                        curr: 1
                    }
                })
            })

            $(window).keypress(function (event) {
                if (event.which === 13) {
                    $('#btnsearch').click();
                }
            })

            //    区域下拉列表的监听事件
            $.ajax({
                url: '/admin/region/SelectregionAll',
                type: "get",
                success: function (res) {
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            $('#area').append(new Option(res.data[i].regionName, res.data[i].regionId));
                        }
                        layui.form.render("select");
                    }
                }
            })
        })
    })
</script>
</html>
